import styles from './QuestionCard.module.scss';
import {
	EditOutlined,
	LineChartOutlined,
	StarOutlined,
	CopyOutlined,
	DeleteOutlined,
} from '@ant-design/icons';
import { Space, Button, Divider, Tag, Popconfirm } from 'antd';
import { useNavigate, Link } from 'react-router-dom';

const QuestionCard = ({
	_id,
	title,
	isPublished,
	isStart,
	answerCount,
	createdAt,
}) => {
	const nav = useNavigate();

	const duplicate = () => {
		console.log('复制成功');
		alert('复制成功');
	};
	// 删除问卷

	const deleteQuestion = () => {
		alert('删除成功');
	};
	return (
		<div className={styles.container}>
			<div className={styles.title}>
				<div className={styles.left}>
					<Space>
						{isPublished && <StarOutlined style={{ color: 'red' }} />}
						<Link
							to={
								isPublished ? `/question/stat/${_id}` : `/question/edit/${_id}`
							}
						>
							{title}
						</Link>
					</Space>
				</div>
				<div className={styles.right}>
					<span>
						{isPublished ? (
							<Tag color="processing">已发布</Tag>
						) : (
							<Tag>未发布</Tag>
						)}
					</span>
					<span> 答卷:{createdAt}</span>
				</div>
			</div>
			<Divider style={{ margin: '12px 0' }}></Divider>
			<div className={styles.bottomArea}>
				<div className={styles.left}>
					<Space>
						<Button
							type="text"
							icon={<EditOutlined />}
							onClick={() => nav(`/question/edit/${_id}`)}
						>
							编辑问卷
						</Button>
						<Button
							type="text"
							icon={<LineChartOutlined />}
							onClick={() => nav(`/question/stat/${_id}`)}
						>
							编辑问卷
						</Button>
					</Space>
				</div>

				<div className={styles.right}>
					<Button type="text" size="small" icon={<StarOutlined />}>
						{isStart ? '取消标星' : '标星'}
					</Button>
					<Popconfirm
						title="确定复制该问卷？"
						okText="确定"
						cancelText="取消"
						onConfirm={duplicate}
					>
						<Button type="text" size="small" icon={<CopyOutlined />}>
							复制
						</Button>
					</Popconfirm>
					<Popconfirm
						title="是否要删除问卷"
						okText="确定"
						cancelText="取消"
						onConfirm={deleteQuestion}
					>
						<Button type="text" size="small" icon={<DeleteOutlined />}>
							删除
						</Button>
					</Popconfirm>
				</div>
			</div>
		</div>
	);
};

export default QuestionCard;
